<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>员工管理</el-breadcrumb-item>
                <el-breadcrumb-item>业务员列表</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="btnBox">
                <el-button type="primary" size="small" @click="addHandle">添加业务员</el-button>
            </div>
            <el-table :data="preparerList" border style="width: 100%" height="620"
                :header-cell-style="{ background: '#409EFF', color: '#FFF' }">
                <el-table-column prop="userId" label="ID" width="100"></el-table-column>
                <el-table-column prop="userName" label="业务员名称"></el-table-column>
                <el-table-column prop="userTel" label="电话（账号）"></el-table-column>
                <el-table-column prop="userPassword" label="登录密码"></el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.userStatus == 1">启用</el-tag>
                        <el-tag type="danger" v-else>禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width='200'>
                    <template slot-scope="scope">
                        <el-button size="small" icon="el-icon-top" @click="statusHandle(scope.row, 1)"
                            v-if="scope.row.userStatus == 0" plain>启用</el-button>
                        <el-button size="small" @click="statusHandle(scope.row, 0)" icon="el-icon-bottom"
                            v-else>禁用</el-button>
                        <el-button size="small" @click="fenHandle(scope.row, 0)">分配区域</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog title="添加业务员" :visible.sync="dialogVisible" width="40%" top="4%" :before-close="handleClose">
                <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="业务员名称" prop="userName">
                        <el-input v-model="form.userName" placeholder="请输入业务员名称" style="width: 220px;"></el-input>
                    </el-form-item>
                    <el-form-item label="业务员电话" prop="userTel">
                        <el-input v-model="form.userTel" placeholder="请输入业务员电话" style="width: 220px;"></el-input>
                    </el-form-item>
                </el-form>
                <el-transfer v-model="selectAreaId" :titles="['未分配', '已分配']" :button-texts="['取消分配', '分配']"
                    :data="areaData"></el-transfer>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="handleClose">取 消</el-button>
                    <el-button type="primary" @click="submitHandle">确 定</el-button>
                </span>
            </el-dialog>



            <el-dialog title="分配区域" :visible.sync="fenDia" width="38%" top="4%" :before-close="fenHandleClose">
                <el-transfer v-model="selectAreaId" :titles="['未分配', '已分配']" :button-texts="['取消分配', '分配']"
                    :data="areaData"></el-transfer>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="fenHandleClose">取 消</el-button>
                    <el-button type="primary" @click="fenSubmitHandle">确 定</el-button>
                </span>
            </el-dialog>

        </el-card>
    </div>
</template>
<script>

import { getSaleUser, addSaleUser, updateSaleUserUp, addpromoterArea, listMyArea } from '../../network/preparer'

import { conditionList } from '../../utils/conditionList'

export default {
    name: 'product',
    data() {
        return {
            preparerList: [],
            dialogVisible: false,
            form: {
                userName: '',
                userTel: '',
            },
            rules: {
                userName: [
                    { required: true, message: '请输入业务员名称', trigger: 'blur' },
                ],
                userTel: [
                    { required: true, message: '请输入业务员电话', trigger: 'blur' },
                ],
            },
            fenDia: false,
            selectAreaId: [],
            areaData: [],
            selectUser: ''
        }
    },
    created() {
        this.getList()
        conditionList[0].list.forEach(ele => {
            this.areaData.push({
                key: ele.regionId,
                label: ele.text,
            })
        })
        console.log(this.areaData);
    },
    methods: {

        getSaleArea() {

            listMyArea({
                userId: this.selectUser.userId
            }).then(res => {
                if (res.flag) {

                    console.log(res);

                    res.data.forEach(ele => {
                        this.selectAreaId.push(ele.areaId)
                    })
                }
            })

        },


        // 分配确认
        fenSubmitHandle() {
            console.log(this.selectAreaId.join(','));

            console.log(this.selectUser.userId);
            // return
            addpromoterArea({
                areaIdList: this.selectAreaId.join(','),
                userId: this.selectUser.userId
            }).then(res => {
                if (res.flag) {
                    this.$message.success('分配成功')
                    this.getList()
                    this.fenHandleClose()
                }
            })
        },

        // 分配区域
        fenHandle(obj) {
            this.fenDia = true
            this.selectUser = obj
            console.log(obj);

            this.getSaleArea()
        },

        fenHandleClose() {
            this.fenDia = false
            this.selectAreaId = []
        },

        statusHandle(obj, flag) {
            updateSaleUserUp({
                userId: obj.userId,
                status: flag
            }).then(res => {
                if (res.flag) {
                    this.getList()
                    this.$message.success('操作成功')
                } else {
                    this.$message.warning('操作失败')
                }
            })

        },


        submitHandle() {
            this.$refs.ruleForm.validate((valid) => {
                console.log(valid);

                if (!valid) return

                if (this.selectAreaId.length == 0) {
                    this.$message.warning('请选择要分配的区域')
                    return
                }
                console.log(this.selectAreaId);


                console.log(this.form);

                var obj = {
                    user: {
                        userName: this.form.userName,
                        userStatus: 1,
                        userTag: -2,
                        userTel: this.form.userTel,
                    },
                    areaIdList: this.selectAreaId.join(',')
                }

                console.log(obj);
                // return
                addSaleUser(obj).then(res => {
                    console.log(res);
                    if (res.flag) {
                        this.getList();
                        this.handleClose();
                        this.dialogVisible = false
                        this.$message.success("添加成功");
                    } else {
                        console.log(res);
                        this.$message.success("添加失败");
                    }
                });
            });

        },
        addHandle() {
            this.dialogVisible = true
        },
        handleClose() {
            this.dialogVisible = false
            this.selectAreaId = []
            this.$refs.ruleForm.resetFields()
        },

        getList() {
            getSaleUser({
                companyId: 0,
                flag: 1  //  0 进销存查询人员  1 广告牌查询人员
            }).then(res => {
                if (res.flag) {
                    console.log(res);
                    this.preparerList = res.data.filter(item => {
                        return item.userTag == -2
                    })
                }
            })
        },
    }
}
</script>

<style lang="less" scoped>
.paginationBox {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}


.input-with-select {
    margin-left: 15px;
    width: 300px;
}

.btnBox {
    display: flex;
    align-items: center;
    margin-top: 15px;
}
</style>